<template>
  <div>
    <div>
      <van-nav-bar title="编辑地址" left-arrow class="vant_head" @click-left="onClickLeft" />
      <div style="position: relative; width: 100%; height: 2rem; line-height: 2rem; top: 1rem">
        <div style="position: absolute; left: 1rem; border: none; outline: none">
          姓名<input
            placeholder="收货人姓名"
            v-model="raw.nickname"
            type="text"
            ref="divRef"
            style="border: none; outline: none; padding-left: 1rem"
          />
        </div>
        <div style="position: absolute; left: 1rem; border: none; outline: none; top: 3rem">
          电话<input
            placeholder="收货人手机号"
            v-model="raw.tel"
            type="text"
            style="border: none; outline: none; padding-left: 1rem"
          />
        </div>
        <div style="position: absolute; left: 1rem; border: none; outline: none; top: 6rem">
          地区<input
            placeholder="选择省/市/区"
            v-model="raw.detail_address"
            type="text"
            style="border: none; outline: none; padding-left: 1rem"
          />
          <span>
            <img
              src="../../assets//jian.png"
              alt=""
              style="position: absolute; width: 1.25rem; height: 1.25rem; right: -8.1875rem"
            />
          </span>
        </div>
        <div style="position: absolute; left: 1rem; border: none; outline: none; top: 9rem">
          详细地址<input
            placeholder="街道门牌、楼层房间信息等"
            v-model="raw.provice_city_area"
            type="text"
            style="border: none; outline: none; padding-left: 1rem"
          />
        </div>
      </div>

      <button
        @click="getaddresss"
        style="
          width: 90%;
          height: 3rem;
          position: absolute;
          left: 1rem;
          top: 17rem;
          border-radius: 1.5rem;
          border: none;
          background-color: #63c38a;
          color: #fff;
        "
      >
        保存
      </button>
      <button
        style="
          width: 90%;
          height: 3rem;
          position: absolute;
          left: 1rem;
          top: 20.5rem;
          border-radius: 1.5rem;
          background-color: #fff;
          color: #000;
          border: 1px solid #ccc;
        "
        @click="handddelete(raw.id)"
      >
        删除
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios'
const getaddreesss = ref<any>([])
const route = <any>useRoute()
const token = ref(localStorage.getItem('token'))
const DeleteDetail = ref(JSON.parse(route.query.item))
console.log(DeleteDetail.value)

console.log(DeleteDetail.value)
console.log(token)
const getaddreess = ref<any>([])
const router = useRouter()
const divRef = ref()

import { ref, onMounted } from 'vue'
import { ro } from 'element-plus/es/locale/index.mjs'
// // 左侧返回
const onClickLeft = () => {
  router.push({ path: '/address' })
}
const handleAdd = () => {
  if (raw.value.nickname == '' || raw.value.tel == '' || raw.value.detail_address == '') {
    showToast({
      message: '请填写完整信息',
    })
  } else {
    //axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}`
    console.log(raw.value)
    // axios
    //   .post('api/v1/address/', raw.value, {
    //     headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token.value },
    //   })
    //   .then((res) => {
    //     console.log(res)
    //     showToast({ message: '修改成功' })
    //     getaddresss()
    //     router.push({ path: '/address' })
    //   })
    //   .catch((res) => {
    //     console.log(res)
    //   })
    //getaddresss()
  }
}

interface raws {
  uid: string
  id: string
  tel: string
  nickname: string
  provice_city_area: string
  longitude: string
  latitude: string
  detail_address: string
}

const ids = ref('2131231')

const raw = ref<raws>({
  uid: '19',
  id: ids.value,
  tel: '2121',
  nickname: '2131231',
  provice_city_area: '2131231',
  longitude: '1123123',
  latitude: '213123',
  detail_address: '2131231',
})

raw.value.id = '2112112'

//修改地址
const getaddresss = async () => {
  console.log(raw.value.id)

  //http://124.221.74.149:8011/v1/address
  await axios
    .post('/addres/chunYuEdit', raw.value)
    .then((res) => {
      console.log(res)
      getaddreesss.value = res.data.data
      router.push({ path: '/address' })
      // console.log(getaddreesss.value)
    })

    .catch((error) => {
      console.log(error)
    })
}

//getaddresss()
onMounted(() => {
  // getaddresss()
  raw.value = DeleteDetail.value
  console.log({ ...raw.value })
})
//点击删除
const handddelete = (id: string) => {
  console.log(id)
  axios
    .delete('/addres/chunYuDelete/', { params: { id } })
    .then((res) => {
      showToast({ message: '删除成功' })
      getaddresss()
      router.push({ path: '/address' })
      console.log(res)
    })
    .catch((res) => {
      console.log(res)
    })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
  color: #63c38a !important;
}

:deep(.van-nav-bar__text) {
  color: #63c38a !important;
}

:deep(.van-button) {
  background-color: #63c38a !important;
  color: white !important;
  border: none;
}
</style>
